<script setup>

import { articleGetAllService, articleSearchService } from '@/api/article.js'

import { ref } from 'vue'

// 定义响应式数据ref
const articleList = ref([]);

// 获取所有文章数据
// 同步获取 返回结果
const getAllArticle = async function () {
    let data = await articleGetAllService();
    articleList.value = data;
}

getAllArticle();


// 定义响应式数据searchConditions
const searchConditions = ref({
    category: '',
    state: ''
})

// 声明search函数
const search = async function () {
    // 文章搜索
    let data = await articleSearchService({ ...searchConditions.value })
    articleList.value = data;
}


</script>

<template>
    <div>

        文章分类: <input type="text" v-model="searchConditions.category">

        发布状态: <input type="text" v-model="searchConditions.state">

        <button v-on:click="search">搜索</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article, index) in articleList" :key="index">
                <td>{{ article.title }}</td>
                <td>{{ article.category }}</td>
                <td>{{ article.time }}</td>
                <td>{{ article.state }}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>

        </table>
    </div>

</template>